<template>
	<div class="app-detail-card">
		<!-- 数据详情展示模块
			
			data 入参
			例：
			{
				"IP" : "IP",
				"主机名" : "主机名",
				"状态" : {
					html : "<span class='green'>正常</span>"
				},
				"描述信息" : "描述信息",
			}
			
		-->
		
		<el-card shadow="never">
			<i :class="'iconfont ' + iconClass"></i>
			<el-form inline v-loading="!data">
				<el-form-item v-for="(value,name) in data" :label="name+'：'" :key="name" >
					<template >
						<span v-if="typeof(value)=='object'" v-html="value.html">
							
						</span>
						<span v-else>
							{{value || '-'}}
						</span>
							
					</template>
				</el-form-item>
				
				<div class="more" v-if="!hasNoSourceData && sourceData && sourceData.varsInfo">
						
						<el-collapse >
								<el-collapse-item title="更多属性">
									
									<div class="el-form el-form--inline">
										
										<div v-for="(list,i) in sourceData.varsInfo" :key="i">
											
											<div v-if="list.varsType==1" label="" :key="list.varsName" >
												<div v-if="list.varsName" class="el-form-item el-form-item--medium">
													<label class="el-form-item__label">变量名：</label>
													<div class="el-form-item__content">
														<span>
															{{list.varsName || "-"}} 
														</span>
													</div>
												</div>
												<div v-if="list.varsValue" class="el-form-item el-form-item--medium">
													<label class="el-form-item__label">变量值：</label>
													<div class="el-form-item__content">
														<span>
															{{list.varsValue || "-"}} 
														</span>
													</div>
												</div>
										</div>
										
										<div  v-if="list.varsType==2"  label="" :key="list.varsName" >
												<div v-if="list.varsName" class="el-form-item el-form-item--medium">
													<label class="el-form-item__label">容器端口：</label>
													<div class="el-form-item__content">
														<span>
															{{list.varsName || "-"}} 
														</span>
													</div>
												</div>
												<div v-if="list.varsValue" class="el-form-item el-form-item--medium">
													<label class="el-form-item__label">端口映射：</label>
													<div class="el-form-item__content">
														<span>
															{{list.varsValue || "-"}} 
														</span>
													</div>
												</div>
										</div>
										
										<!--<div  v-if="list.varsType==3"  label="" :key="list.varsName" >
												<div class="el-form-item el-form-item--medium">
													<label class="el-form-item__label">应用名：</label>
													<div class="el-form-item__content">
														<span>
															{{list.varsName}} 
														</span>
													</div>
												</div>
												<div class="el-form-item el-form-item--medium">
													<label class="el-form-item__label">关联关系：</label>
													<div class="el-form-item__content">
														<span>
															{{list.varsValue}} 
														</span>
													</div>
												</div>
										</div>-->
										
										<div  v-if="list.varsType==4"  label="" :key="list.varsName" >
												<div v-if="list.varsName" class="el-form-item el-form-item--medium">
													<label class="el-form-item__label">容器挂载目录：</label>
													<div class="el-form-item__content">
														<span>
															{{list.varsName || "-"}} 
														</span>
													</div>
												</div>
												<div v-if="list.varsValue" class="el-form-item el-form-item--medium">
													<label class="el-form-item__label">宿主机目录：</label>
													<div class="el-form-item__content">
														<span>
															{{list.varsValue || "-"}} 
														</span>
													</div>
												</div>
										</div>
										
										
										<div  v-if="list.varsType==5"  label="" :key="list.varsName" >
												<div v-if="list.varsValue" class="el-form-item el-form-item--medium">
													<label class="el-form-item__label">日志指定目录：</label>
													<div class="el-form-item__content">
														<span>
															{{list.varsValue || "-"}} 
														</span>
													</div>
												</div>
										</div>
											
										</div>
										
									</div>
									
								</el-collapse-item>
						</el-collapse>
						
				</div>
				
			</el-form>
			
		</el-card>
	</div>
</template>

<script>
export default {
  props: ["data", "iconClass","sourceData"],
  data() {
    return {
				hasNoSourceData : false,
		};
  },
  methods: {

	},
	mounted(){
		
	},
	watch:{
		sourceData(n,o){
			if(n&&n.varsInfo){
				let hasVal ;
				n.varsInfo.forEach(el=>{
					if(el.varsType==5){
						if(el.varsValue){
							hasVal = true ;
						}
					}else{
						if(el.varsValue||el.varsName){
							hasVal = true ;
						}
					}
				})
				if(!hasVal){
					this.hasNoSourceData = true 
				}
			}
		}
	}
};
</script>

<style lang="scss" >
@import "../../../styles/variables.scss";

.app-detail-card {
  position: relative;
  margin: 20px;

  .el-card {
    border: 1px solid $borderGrey;

    .el-card__body {
      padding: 0;
      overflow: hidden;
    }
  }
  .el-card__body > i {
    display: block;
    width: 110px;
    text-align: center;
    height: 110px;
    position: absolute;
    left: 1px;
    top: 1px;
    font-size: 70px;
    color: $mainBlue;
    line-height: 110px;
  }

  .el-form {
    padding: 20px 20px 10px 20px;
    margin-left: 110px;
    box-sizing: border-box;
    min-height: 110px;
    width: calc(100% - 110px);
    border-left: 1px solid $borderGrey;
		
    .el-form-item {
      box-sizing: border-box;
      margin: 0 0 0 0;
      padding: 0 10px 0 0;
      min-width: 25%;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      label {
        color: $fontDeepGrey;
      }
    }
  }
	.el-icon-arrow-right:before {
			content: "\E604";
			display: none;
	}
	
	
	.more {
		
		.el-form {
			min-height: 70px;
			width: 100%;
			margin: 0;
			border: none;
			background: #fafafa;
			border-radius: 5px;
			white-space: normal;
		}
		
		.el-collapse,.el-collapse-item__header {
			
			margin: -2px 0;
			color: $mainBlue;
			border: none;
		}
		.el-collapse-item__header{
			display: inline-block;
			width: auto;
		}
		
		.el-collapse-item__content {
			padding-bottom: 10px;
		}
		
		.el-form-item {
			font-size: 12px;
			white-space: normal;
		}
		.el-form-item__label,.el-form-item__content {
			font-size: 13px;
		}
		.el-collapse-item__content,.el-collapse-item__wrap {
			border-bottom: none;
		}
	}
	
}
</style>